<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
            <el-date-picker
              style="width:200px;"
              v-model="listQuery.start_time"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始时间">
            </el-date-picker>
            <el-date-picker
              style="width:200px;"
              v-model="listQuery.end_time"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择结束时间">
            </el-date-picker>
            <!-- <el-select filterable v-model="listQuery.type_id" class="filter-item marginRB10" clearable placeholder='锁房状态' style="width: 200px;">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
            <el-input class="marginRB10" v-model="listQuery.room_id" placeholder="房间ID" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.room_name" placeholder="房间名称" style="width:200px;"
                      clearable></el-input>
            <el-button type="primary" @click="searchSubmit" class="marginRB10">查询</el-button>
            <el-button type="primary" @click="resetList" class="marginRB10">重置</el-button>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- 房间id	房间名称	房主ID	房主昵称	房主头像	锁房时间	状态 -->
          <el-table-column prop="room_id" label="房间id"></el-table-column>
          <el-table-column prop="room_name" label="房间名称"></el-table-column>
          <el-table-column prop="user_code" label="房主ID"></el-table-column>
          <el-table-column prop="nickname" label="房主昵称"></el-table-column>
          <el-table-column prop="head_picture" label="房主头像">
            <template slot-scope="scope">
              <el-popover placement="right" max-width="220" trigger="hover">
                <img :src="scope.row.head_picture" alt="" style="max-width: 200px;max-height: 200px">
                <img slot="reference" :src="scope.row.head_picture" alt="" style="width: 80px;height: 80px">
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="state" label="锁房状态" >
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.state === 1">锁房中</el-tag>
              <el-tag type="success" v-if="scope.row.state === 2">已解锁</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column prop="total_lock_time" label="锁房总时长"></el-table-column>
          <el-table-column prop="lock_time_avg" label="平均锁房总时长"></el-table-column>
        </el-table>
        <cus-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {listData, listTypeData} from '@/api/room/lockTime'

export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        room_name: undefined,
        room_id: undefined,
        start_time: undefined,
        end_time: undefined,
        type_id: undefined
      },
      typeOptions: [{value: 1, label: '锁房中'}, {value: 2, label: '已解锁'}],
      menuList: [],
    }
  },
  created() {
    // this.getTypeList()
    this.getList()
  },
  methods: {
    /* getTypeList(){
        let urlData = '?type=1';
        listTypeData(urlData).then(response => {

            for(let key in response.data){
                this.typeOptions.push({value:key,label:response.data[key]})
            }
        })
    }, */
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList()
    },
    getList() {
      this.listLoading = true
      let urlData = '?';
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`
      }
      if (this.listQuery.room_name) {
        urlData = urlData + `&room_name=${this.listQuery.room_name}`
      }
      if (this.listQuery.room_id) {
        urlData = urlData + `&room_id=${this.listQuery.room_id}`
      }
      if (this.listQuery.start_time) {
        urlData = urlData + `&start_time=${this.listQuery.start_time}`
      }
      if (this.listQuery.end_time) {
        urlData = urlData + `&end_time=${this.listQuery.end_time}`
      }
      if (this.listQuery.type_id) {
        urlData = urlData + `&type_id=${this.listQuery.type_id}`
      }
      listData(urlData).then(response => {
        this.menuList = response.data.list;
        this.total = response.data.meta.total
        this.listLoading = false
      })
    },
    resetList() {
      this.listQuery.room_name = undefined;
      this.listQuery.room_id = undefined;
      this.listQuery.start_time = undefined;
      this.listQuery.end_time = undefined;
      this.listQuery.type_id = undefined;
    },
  }
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
